<template>
  <div class="mainContent">
    <pathTracking :path="Model.path" />
    <div class="container">
      <!-- {{this.$route.params.id}} -->
      <!-- 一级tabs -->
      <el-radio-group v-model="Model.activeTab" @change="onTabChange">
        <el-radio-button label="1">售中订单详情</el-radio-button>
        <el-radio-button label="2">赠品管理</el-radio-button>
        <el-radio-button label="3">支付记录</el-radio-button>
        <el-radio-button label="4">操作日志</el-radio-button>
      </el-radio-group>
      <div class="tabBox">
        <el-form :inline="true" :model="Model.formInline" class="demo-form-inline">
          <el-form-item label="售中单号">:{{Model.formInline.order}}</el-form-item>
          <el-form-item label="售后状态">:{{Model.formInline.status}}</el-form-item>
          <el-form-item label="sap售中单号">:{{Model.formInline.sapOrder}}</el-form-item>
          <el-form-item label="原销售定单号">:{{Model.formInline.defaultOrder}}</el-form-item>
          <el-form-item label="原sap销售订单号">:{{Model.formInline.defaultSapOrder}}</el-form-item>
        </el-form>
        <div class="tabBoxStep">
          <el-steps :active="Model.refundStep.activeStep">
            <el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.refundStep.step" :key="index"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="tableBox">
        <el-row>
          <div class="common-table-title">
            <div class="common-table-icon"></div>
            <div class="common-table-fl">应退商品</div>
          </div>
        </el-row>
        <div class="table">
        <el-table :data="Model.tableData" show-summary border style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
          <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
          <el-table-column prop="origin" label="商品图片" width="100"></el-table-column>
          <el-table-column prop="deliveryTime" label="定制编码" width="120"></el-table-column>
          <el-table-column prop="deliveryTime2" label="条码" width="120"></el-table-column>
          <el-table-column prop="qcFinishTime" label="销售分类" width="120"></el-table-column>
          <el-table-column prop="orderId7" width="120">
            <template slot="header" slot-scope="scope">
                <el-tooltip content="钻石信息顺序:颜色-净度-切工-抛光-对称-荧光" placement="top">
                  <span>描述 ？</span>
                </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="刻字" width="200"></el-table-column>
          <el-table-column prop="status" label="主数量" width="120"></el-table-column>
          <el-table-column prop="status" label="价格" width="120"></el-table-column>
          <el-table-column prop="status" label="备注" width="120"></el-table-column>
        </el-table>
        </div>
       
      </div>
      <div class="tableBox">
        <el-row>
          <div class="common-table-title">
            <div class="common-table-icon"></div>
            <div class="common-table-fl">退款商品信息</div>
          </div>
        </el-row>
        <div class="table">
          <el-table :data="Model.tableData" show-summary border style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
          <el-table-column prop="origin" label="销售订单号" width="100"></el-table-column>
          <el-table-column prop="deliveryTime" label="订单金额" width="120"></el-table-column>
          <el-table-column prop="deliveryTime2" label="商品实付金额" width="120"></el-table-column>
          <el-table-column prop="qcFinishTime" label="定制费用" width="120"></el-table-column>
          <el-table-column prop="status" label="证书遗失费用" width="200"></el-table-column>
          <el-table-column prop="status" label="发票遗失费用" width="120"></el-table-column>
          <el-table-column prop="status" label="其他费用" width="120"></el-table-column>
          <el-table-column prop="status" label="合计退款金额" width="120"></el-table-column>
          <el-table-column prop="status" label="备注" width="120"></el-table-column>
        </el-table>
        </div>
      </div>
      <div class="tableBox">
        <el-row>
          <div class="common-table-title">
            <div class="common-table-icon"></div>
            <div class="common-table-fl">退款用户账户</div>
          </div>
        </el-row>
        <div class="table">
          <el-table :data="Model.tableData" border style="width: 100%;max-height:550px" @selection-change="handleSelectionChange">
          <el-table-column prop="origin" label="退款账号" width="100"></el-table-column>
          <el-table-column prop="deliveryTime" label="开户行" width="120"></el-table-column>
          <el-table-column prop="deliveryTime2" label="开户人姓名" width="120"></el-table-column>
          <el-table-column prop="qcFinishTime" label="退款金额" width="120"></el-table-column>
          <el-table-column prop="status" label="退款申请时间"></el-table-column>
        </el-table>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
  import pathTracking from "@/components/common/pathTracking";
  import pagination from "@/components/common/pagination.vue";
  import advancedSearch from "@/components/common/filter/advancedSearch";
  import {
    getDateString
  } from "@/assets/js/common.js";
  import Model from "./model.js";
  import Controller from "./controller.js";
  export default {
    name: "purchase",
    mixins: [Model, Controller],
    components: {
      advancedSearch,
      pagination,
      pathTracking
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "./index.less";
</style>